import React, { useState, useEffect } from 'react';
import { Form, Slider, InputNumber, Button } from 'antd';
import styles from './index.less';
const DemoForm = props => {
  const [form] = Form.useForm();
  useEffect(() => {
    if (props.init) props.init(form);
  }, []);
  const initialValues = {
    // 初始的 sliders 值
    sliders: [
      {
        key: 'amountOfIncomingWaste',
        name: '入厂垃圾量',
        unit: 't',
        value: 0,
        marks: { 0: '0', 1000000: '1000000' },
        min: 0,
        max: 1000000,
      },
      {
        key: 'calorificValueOfIncomingRefuse',
        name: '入场垃圾热值',
        unit: 'Kcal/Kg',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'compressedAirVolume',
        name: '压缩空气量',
        unit: '万Nm³',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
      {
        key: 'purchasedElectricity',
        name: '外购电量',
        unit: '万Kwh',
        value: 0,
        marks: { 0: '0', 100000: '100000' },
        min: 0,
        max: 100000,
      },
      {
        key: 'coalQuantity',
        name: '煤炭量',
        unit: 't',
        value: 0,
        marks: { 0: '0', 1000000: '1000000' },
        min: 0,
        max: 1000000,
      },
      {
        key: 'calorificValueOfCoal',
        name: '煤炭热值',
        unit: 'Kcal/Kg',
        value: 0,
        marks: { 2000: '2000', 15000: '15000' },
        min: 2000,
        max: 15000,
      },
      {
        key: 'naturalGasVolume',
        name: '天然气量',
        unit: 'Nm³',
        value: 0,
        marks: { 0: '0', 1000000: '1000000' },
        min: 0,
        max: 1000000,
      },
      {
        key: 'calorificValueOfNaturalGas',
        name: '天然气热值',
        unit: 'Kcal/Nm³',
        value: 0,
        marks: { 2000: '2000', 15000: '15000' },
        min: 2000,
        max: 15000,
      },
      {
        key: 'dieselFuelCapacity',
        name: '柴油量',
        unit: 't',
        value: 0,
        marks: { 0: '0', 1000000: '1000000' },
        min: 0,
        max: 1000000,
      },
      {
        key: 'dieselCalorificValue',
        name: '柴油热值',
        unit: 'Kcal/t',
        value: 0,
        marks: { 8000: '8000', 15000: '15000' },
        min: 8000,
        max: 15000,
      },
    ],

    // 初始的 InputNumber 值
    inputNumbers: [
      {
        key: 'amountOfIncomingWaste',
        name: '入厂垃圾量',
        unit: 't',
        value: 0,
        marks: { 0: '0', 1000000: '1000000' },
        min: 0,
        max: 1000000,
      },
      {
        key: 'calorificValueOfIncomingRefuse',
        name: '入场垃圾热值',
        unit: 'Kcal/Kg',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'compressedAirVolume',
        name: '压缩空气量',
        unit: '万Nm³',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
      {
        key: 'purchasedElectricity',
        name: '外购电量',
        unit: '万Kwh',
        value: 0,
        marks: { 0: '0', 100000: '100000' },
        min: 0,
        max: 100000,
      },
      {
        key: 'coalQuantity',
        name: '煤炭量',
        unit: 't',
        value: 0,
        marks: { 0: '0', 1000000: '1000000' },
        min: 0,
        max: 1000000,
      },
      {
        key: 'calorificValueOfCoal',
        name: '煤炭热值',
        unit: 'Kcal/Kg',
        value: 0,
        marks: { 2000: '2000', 15000: '15000' },
        min: 2000,
        max: 15000,
      },
      {
        key: 'naturalGasVolume',
        name: '天然气量',
        unit: 'Nm³',
        value: 0,
        marks: { 0: '0', 1000000: '1000000' },
        min: 0,
        max: 1000000,
      },
      {
        key: 'calorificValueOfNaturalGas',
        name: '天然气热值',
        unit: 'Kcal/Nm³',
        value: 0,
        marks: { 2000: '2000', 15000: '15000' },
        min: 2000,
        max: 15000,
      },
      {
        key: 'dieselFuelCapacity',
        name: '柴油量',
        unit: 't',
        value: 0,
        marks: { 0: '0', 1000000: '1000000' },
        min: 0,
        max: 1000000,
      },
      {
        key: 'dieselCalorificValue',
        name: '柴油热值',
        unit: 'Kcal/t',
        value: 0,
        marks: { 8000: '8000', 15000: '15000' },
        min: 8000,
        max: 15000,
      },
    ],
  };

  const onFinish = values => {
    console.log('Form values:', values);
  };

  const onSliderChange = (index, value) => {
    const sliders = form.getFieldValue('sliders').slice(); // 获取当前的 Slider 值
    sliders[index] = value; // 更新对应索引的 Slider 值
    form.setFieldsValue({ sliders }); // 更新表单字段的值

    // InputNumber 和 Slider 之间双向联动
    const inputNumbers = form.getFieldValue('inputNumbers').slice(); // 获取当前的 InputNumber 值
    inputNumbers[index] = value; // 更新对应索引的 InputNumber 值
    form.setFieldsValue({ inputNumbers }); // 更新表单字段的值
  };

  const onInputNumberChange = (index, value) => {
    const inputNumbers = form.getFieldValue('inputNumbers').slice(); // 获取当前的 InputNumber 值
    inputNumbers[index] = value; // 更新对应索引的 InputNumber 值
    form.setFieldsValue({ inputNumbers }); // 更新表单字段的值

    // InputNumber 和 Slider 之间双向联动
    const sliders = form.getFieldValue('sliders').slice(); // 获取当前的 Slider 值
    sliders[index] = value; // 更新对应索引的 Slider 值
    form.setFieldsValue({ sliders }); // 更新表单字段的值
  };

  const validateInputNumber = (_, value) => {
    if (value < 1 || value > 100) {
      return Promise.reject('请输入1到100之间的数字');
    }
    return Promise.resolve();
  };

  return (
    <div className={styles.CoefficientForm}>
      <Form
        form={form}
        onFinish={onFinish}
        initialValues={initialValues}
        layout="vertical"
      >
        {initialValues.sliders.map((sliderValue, index) => (
          <div className={styles.inputNumberSlider}>
            <Form.Item
              style={{ marginBottom: 0 }}
              key={sliderValue.key}
              name={sliderValue.key}
              label=""
              // rules={[
              //   { required: true, message: '请输入Input Number的值' },
              //   { validator: validateInputNumber },
              // ]}
            >
              <InputNumber
                size="small"
                step={0.01}
                style={{
                  position: 'absolute',
                  top: 2,
                  left: 119,
                  zIndex: 1000,
                  width: 110,
                }}
                addonAfter={sliderValue.unit}
                onChange={value => onInputNumberChange(index, value)}
              />
            </Form.Item>
            <Form.Item
              key={index}
              name={sliderValue.key}
              label={sliderValue.name}
              rules={[{ required: true, message: '请选择/输入Slider的值' }]}
            >
              <Slider
                step={0.01}
                onChange={value => onSliderChange(index, value)}
                marks={sliderValue.marks}
                min={sliderValue.min}
                max={sliderValue.max}
              />
            </Form.Item>
          </div>
        ))}
      </Form>
    </div>
  );
};

export default DemoForm;
